<div *ngIf="noResearchMessage">
    {{noResearchMessage}}
</div>
<div *ngIf="!noResearchMessage && company != undefined">
    <div class="d-flex align-items-center mb-3">
        <h4 class="mr-auto">ESG Rating <span *ngIf="researchType === 'core'" class="badge badge-medium-grey text-body text-uppercase ml-2">Core Framework</span></h4>
        <div class="ml-auto">
            <app-company-report-download [company]="company" [downloadData]="downloadData" [displayText]="'Executive Summary'" [isSummary]="true" [isPrimary]="false" [analyticsData]="summaryAnalyticsData"></app-company-report-download>
            <app-company-report-download #esgReportTask [company]="company" [downloadData]="downloadData" [displayText]="'Full Report'" [isSummary]="false" [modalSettings]="hasCustomDownloadSettings ? customSettingsModal : undefined" class="ml-2" [analyticsData]="analyticsData"></app-company-report-download>
        </div>
    </div>

    <router-outlet></router-outlet>

    <app-modal #customSettingsModal [size]="'modal-lg'" [showCloseButton]=false >
        <div class="app-modal-header">
            Download {{company.companyName}} ESG Company Report
        </div>
        <div class="app-modal-body">
            <div class="row mb-4">
                <span class="col-md-4">Matrix</span>
                <span class="col-md-8">
                    <select class="form-control" [(ngModel)]="selectedMatrix">                        
                        <option *ngFor="let matrix of weightMatrices" [value]='matrix.id'>{{matrix.name}}</option>
                    </select>
                </span>
            </div>
            <div class="row mb-4">
                <span class="col-md-4">Reference Universe</span>
                <span class="col-md-8">
                    <select class="form-control" [(ngModel)]="selectedUniverse">                        
                        <option *ngFor="let universe of referenceUniverses" [value]='universe.id'>{{universe.name}}</option>
                    </select>
                </span>
            </div>
            <div class="row mb-4">
                <span class="col-md-4">Comparative Group</span>
                <span class="col-md-8">
                    <select class="form-control" [(ngModel)]="selectedGroup">                        
                        <option [value]='0'>Peer Group</option>
                        <option [value]='1'>Universe Group</option>
                    </select>
                </span>
            </div>
            <div class="row mb-4">
                <span class="col-md-4">Combine Company Types</span>
                <span class="col-md-8">
                    <select class="form-control" [(ngModel)]="selectedCombineType">                        
                        <option [value]='16'>Yes</option>
                        <option [value]='1'>No</option>                        
                    </select>
                </span>
            </div>
            <div class="row">
                <span class="col-md-4">Combine Template Types</span>
                <span class="col-md-8">
                    <select class="form-control" [(ngModel)]="selectedCombineTemplate">                        
                        <option [value]='2'>Yes</option>
                        <option [value]='1'>No</option>                        
                    </select>
                </span>
            </div>            
        </div>
        <div class="app-modal-footer">
            <button class="btn btn-primary-dark" (click)="customReportGeneration()">Generate</button>
            <button class="btn btn-transparent" (click)="customSettingsModal.hide()">Cancel</button>            
        </div>
    </app-modal>
</div>